<template>
  <div id="tabbar-item" @click="handleLink" :style="isSelected">
    <slot name="icon"></slot>
    <slot name="tab"></slot>
  </div>
</template>

<script>
  export default {
    props:{
      path:{
        type:String,
        value:''
      },
      customColor:{
        type:String,
        default:'#ff5777'
      }
    },
    data(){
      return {

      }
    },
    methods:{
      handleLink(){
        this.$router.push(this.path).catch(err=>err)
      }
    },
    computed:{
      isSelected:function(){
        return !!!this.$route.path.indexOf(this.path)?{color:this.customColor}:{color:'#aaa'}
      }
    }
  }
</script>

<style scoped>
  #tabbar-item{
  	flex:1;
  }

</style>
